<template>
  <div class="content">
    <!-- 筛选区域 -->
    <el-row class="row-bottom">
      <el-col :span="6">
        <span>订单编号</span>
        <el-input id="input-uid" v-model="query.order_uid" placeholder="请输入订单编号" />
      </el-col>
      <el-col :span="6">
        <span>订单金额</span>
        <div class="amount">
          <el-input v-model="query.price_min" placeholder="最低金额" />
          <div>～</div>
          <el-input v-model="query.price_max" placeholder="最高金额" />
        </div>
      </el-col>
      <el-col :span="6">
        <span>订单状态</span>
        <el-select v-model="query.status" style="margin-left: 24px">
          <el-option v-for="(val, key, i) in orderStatusList" :key="i" :label="val" :value="key" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <span>旅客姓名</span>
        <el-input id="input-uid" v-model="query.guest_name" placeholder="请输入旅客姓名" />
      </el-col>
    </el-row>
    <el-row style="margin-bottom:40px">
      <el-col :span="6">
        <span>联系方式</span>
        <el-input id="input-uid" v-model="query.guest_telephone" placeholder="请输入联系方式" />
      </el-col>
      <el-col :span="6">
        <span>创建时间</span>
        <el-date-picker
          v-model="createDate"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="选择时间"
          :default-time="['12:00:00']"
          class="picker"
        />
      </el-col>
      <el-col :span="6">
        <span>出行日期</span>
        <el-date-picker
          v-model="travelDate"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="选择时间"
          :default-time="['12:00:00']"
          class="picker"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain class="filter" @click="newOrderList">筛选</el-button>
        <el-button type="primary" plain class="reset" circle @click="reload">
          <i class="el-icon-refresh-right" />
        </el-button>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <el-table
      ref="orderList"
      height="66vh"
      :data="orderList"
      style="width: 100%"
      :header-cell-style="{ color: 'black' }"
    >
      <el-table-column label="订单编号" width="180px" fixed>
        <template v-slot="scope">{{ scope.row.order_uid }}</template>
      </el-table-column>
      <el-table-column label="支付流水号" prop="get_funds_log[0].funds_uid" min-width="180px" />
      <el-table-column label="订单金额" prop="merchant_price" min-width="130px">
        <template v-slot="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="$capitalizationAmount(scope.row.merchant_price)"
            placement="top-start"
          >
            <span>￥{{ scope.row.merchant_price }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="旅客姓名" prop="merchant_price" min-width="130px">
        <template v-slot="scope">
          <el-tag
            v-if="scope.row.get_guests === null"
            type="warning"
            effect="dark"
          >{{ scope.row.get_guests }}</el-tag>
          <el-tag v-else-if="scope.row.get_guests.length === 0" type="warning" effect="dark">处理中</el-tag>
          <tool
            v-else
            :content="scope.row.get_guests | passengers('name')"
          >{{ scope.row.get_guests | passengers('name') }}</tool>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" prop="merchant_price" min-width="130px">
        <template v-slot="scope">
          <el-tag
            v-if="scope.row.get_guests === null"
            type="warning"
            effect="dark"
          >{{ scope.row.get_guests }}</el-tag>
          <el-tag v-else-if="scope.row.get_guests.length === 0" type="warning" effect="dark">处理中</el-tag>
          <tool
            v-else
            :content="scope.row.get_guests | passengers('telephone')"
          >{{ scope.row.get_guests | passengers('telephone') }}</tool>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" min-width="100px">
        <template v-slot="scope">
          <el-tag
            :type="
              orderStatusList[scope.row.status_display] === '正常'
                ? ''
                : orderStatusList[scope.row.status_display] === '退款'
                  ? 'danger'
                  : 'warning'
            "
            effect="dark"
          >{{ orderStatusList[scope.row.status_display] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单创建时间" prop="created_at" min-width="170px" />
      <el-table-column label="出行日期" min-width="170px">
        <template v-slot="scope">{{ scope.row.get_products[0].target_at }}</template>
      </el-table-column>
      <el-table-column width="100px" label="操作" fixed="right">
        <template v-slot="scope">
          <el-button type="text" @click="toRrderDetails(scope.row.order_uid)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="dingwei">
      <el-pagination
        :current-page="query.page"
        :page-sizes="$arrays.tableSize"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { getOrderList } from '@/api/order'
import tool from '@/components/tool'
export default {
  name: 'OrderList',
  components: { tool },
  filters: {
    passengers(data, type) {
      if (data === null) {
        return '---'
      } else if (data.length === 0) {
        return '---'
      } else {
        switch (type) {
          case 'name':
            var names = ''
            data.forEach((item) => {
              names = names + item.full_name + ','
            })
            names = names.substr(0, names.length - 1)
            return names
          case 'telephone':
            var telephones = ''
            data.forEach((item) => {
              if (item.telephone !== '') {
                telephones = telephones + item.telephone + ','
              }
            })
            telephones = telephones.substr(0, telephones.length - 1)
            return telephones
        }
      }
    }
  },
  data() {
    return {
      orderList: [],
      createDate: '',
      travelDate: null,
      query: {
        limit: 20,
        page: 1,
        order_uid: '',
        status: '',
        price_min: '',
        price_max: '',
        start_at: '',
        end_at: '',
        guest_name: '',
        guest_telephone: '',
        target_at_start: '',
        target_at_end: ''
      },
      total: 0,
      orderStatusList: {
        '': '全部',
        NORMAL: '正常',
        REFUND: '退款',
        CANCEL: '取消',
        PROCESS: '处理中',
        REFUND_PROCESS: '退款处理中',
        UPGRADE_PROCESS: '升级处理中',
        EXCHANGED_PROCESS: '改签处理中'
      },
      // 防抖函数
      antiShake: null
    }
  },
  watch: {
    travelDate: function(date) {
      if (date === '' || date === null) {
        this.query.target_at_start = ''
        this.query.target_at_end = ''
      } else {
        var star = new Date(date[0])
        var starMonth = (star.getMonth() + 1).toString()
        starMonth = starMonth.length === 1 ? '0' + starMonth : starMonth
        var starDate = star.getDate().toString()
        starDate = starDate.length === 1 ? '0' + starDate : starDate
        var end = new Date(date[1])
        var endMonth = (end.getMonth() + 1).toString()
        console.log(typeof endMonth)
        endMonth = endMonth.length === 1 ? '0' + endMonth : endMonth
        var endDate = end.getDate().toString()
        endDate = endDate.length === 1 ? '0' + endDate : endDate
        this.query.target_at_start =
          star.getFullYear() +
          '-' +
          starMonth +
          '-' +
          starDate +
          ' ' +
          '00:00:00'
        this.query.target_at_end =
          end.getFullYear() + '-' + endMonth + '-' + endDate + ' ' + '23:59:59'
        console.log(this.query)
      }
    }
  },
  created() {
    this.getOrderList()
  },
  mounted() {
    this.antiShake = this.shakeProof(this.dropDowwn, 500)
    window.onresize = () => {
      this.antiShake()
    }
  },
  methods: {
    shakeProof(antiShake, delay) {
      let timer
      return function(args) {
        clearInterval(timer)
        timer = setTimeout(() => {
          this.$refs.orderList.doLayout()
        }, delay)
      }
    },
    headerDragend() {
      console.log(123456)
    },
    handleSizeChange(newPageSize) {
      this.query.limit = newPageSize
      this.getOrderList()
    },
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getOrderList()
    },
    getOrderList() {
      getOrderList(this.query).then((res) => {
        this.orderList = res.data.data.data
        this.total = res.data.data.total
      })
    },
    newOrderList() {
      if (this.createDate.length === 0 || this.createDate === null) {
        this.getOrderList()
      } else {
        var star = new Date(this.createDate[0])
        var end = new Date(this.createDate[1])
        this.query.start_at =
          star.getFullYear() +
          '-' +
          (star.getMonth() + 1) +
          '-' +
          star.getDate() +
          ' ' +
          star.getHours() +
          ':' +
          star.getMinutes() +
          ':' +
          star.getSeconds()
        this.query.end_at =
          end.getFullYear() +
          '-' +
          (end.getMonth() + 1) +
          '-' +
          end.getDate() +
          ' ' +
          end.getHours() +
          ':' +
          end.getMinutes() +
          ':' +
          end.getSeconds()
        this.getOrderList()
      }
    },
    reload() {
      this.query = {
        limit: 20,
        page: 1,
        order_uid: '',
        status: '',
        price_min: '',
        price_max: '',
        start_at: '',
        end_at: '',
        guest_name: '',
        guest_telephone: '',
        target_at_start: '',
        target_at_end: ''
      }
      this.createDate = ''
      this.travelDate = ''
      this.getOrderList()
    },
    toRrderDetails(uid) {
      this.$router.push({ name: 'orderDetails', query: { id: uid }})
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 24px;
  .row-bottom {
    margin-bottom: 22px;
  }
}
.el-row {
  min-width: 1366px;
  span {
    font-size: 16px;
    color: black;
    font-weight: bold;
  }
  div {
    display: inline-block;
  }
  .el-input {
    width: calc(100% - 128px);
    margin-left: 24px;
  }
  .amount {
    width: calc(100% - 128px);
    margin-left: 24px;
    .el-input {
      width: calc(50% - 8px);
      margin: 0;
    }
  }
  .el-select {
    width: calc(100% - 128px);
    // min-width: 10vw;
  }
  .picker {
    margin-left: 24px;
    // min-width: 325px;
    width: calc(100% - 128px);
  }
}
.check {
  color: #1890ff;
  margin-right: 20px;
}
.reset {
  width: 40px;
}
// .el-pagination {
//   position: absolute;
//   bottom: 20px;
//   left: 24px;
// }
.dingwei {
  /* // margin-top: 16px; */
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 20px !important;
  padding-top: 24px !important;
  background-color: white;
  z-index: 5;
}
</style>
<style lang="scss">
.el-range-editor--medium .el-range-input {
  font-size: 12px;
}
</style>

